import React, {useEffect, useRef, useState} from 'react';
import {
  StyleSheet,
  View,
  Button,
  Animated,
  TouchableOpacity,
  Text,
  Easing,
} from 'react-native';

const initVal = {x: 0, y: 0};
const Animate_valueXY矢量动画9_8 = () => {
  const [first, setfirst] = useState(initVal);
  const vector = useRef(new Animated.ValueXY(initVal)).current;

  useEffect(() => {
    /* ------9_8 Animate_valueXY矢量动画*/
    Animated.timing(vector, {
      toValue: first,
      duration: 500,
      useNativeDriver: false,
    }).start();
  }, [first]);

  return (
    <View style={styles.root}>
      <Button
        title="按钮 reset"
        onPress={() => {
          setfirst(initVal);
        }}
      />
      <Button
        title="按钮 矢量"
        onPress={() => {
          setfirst(old => {
            return {
              x: old.x + 40,
              y: old.y + 40,
            };
          });
        }}
      />
      <Animated.View
        style={[
          /* --平移的属性 */
          styles.view,
          {marginLeft: vector.x, marginTop: vector.y},
          // {transform: [{translateX: marginLeft}]},
          {
            // position: 'absolute',
            // top: marginLeft,
            // left: marginLeft,
          },
        ]}
      />
    </View>
  );
};

export default Animate_valueXY矢量动画9_8;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 400,
    backgroundColor: 'white',
  },
  view: {
    width: 100,
    height: 100,
    backgroundColor: '#3050ff',
    marginTop: 20,
  },
  button: {
    marginLeft: 'auto',
    width: 200,
    height: 65,
    backgroundColor: '#2030FF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
});
